<template>
  <div class="back-container">
    <div class="back-head">
      <img src="@/assets/logo1.png" alt="">
        美的后台管理系统
      <router-link to="/login" class="logOut">注销账号</router-link>
    </div>
    <div class="back-box">
      <div class="back-left">
        <router-link to="/back/userman" class="usermanage"><span></span>用户管理</router-link>
        <router-link to="/back/permiss" class="usermanage"><span></span>权限管理</router-link>
        <router-link to="/back/goods" class="usermanage"><span></span>商品管理</router-link>
        <router-link to="/back/order" class="usermanage"><span></span>订单管理</router-link>
        <router-link to="/back/sys" class="usermanage"><span></span>系统管理</router-link>
      </div>
      <div class="back-right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
methods: {
  // 点击注销账号 回到登入页面
  logOut () {
    // 删除原有的 token
    localStorage.removeItem('token')
    // // 跳转页面
    // location.replace('/login')
  }
}
}
</script>

<style lang="less" scoped>
.back-container{
  width: 700px;
  margin: 100px auto;
  border: 1px solid #ccc;
  .back-head{
    position: relative;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-weight: 600;
    img{
      height: 48px;
      width: 100px;
      vertical-align: middle;
    }
    .logOut{
      position: absolute;
      right: 10px;
      text-decoration: none;
      font-size: 16px;
      color: #363A41;
    }
  }
  .back-box{
      display: flex;
      height: 500px;
      border: 1px solid #ccc;
      .back-left{
        flex: 20%;
        .usermanage{
          position: relative;
          display: block;
          height: 40px;
          background-color: #EFEFEF;
          padding-left: 20px;
          line-height: 40px;
          color: #353B3E;
          text-decoration: none;
          font-weight: 800;
          > span{
            position: absolute;
            left: 0;
            border: 2px solid #349F7C;
            height: 36px;
          }
        }
      }
      .back-right{
        flex: 80%;
        padding: 0 10px;
        // background-color: #ccc;
      }
    }
}
</style>